<template>
    <div>
        <button class="btn-back" @click="$router.replace({ path: '/modules' })">返回</button>
        <section class="apps">
            <h2 class="title">行业应用</h2>
            <p class="subtitle">Industrial applications</p>
            <ul class="card" >
                <li  v-for="(item,index) in dataList" :key="'a' + index" @click="tabchange(item,index)">
                    <div class="dataItem" :style="{background:`url(${activeIndex == item.id ? item.selectedIcon : item.icon }) no-repeat`}" >
                    <!-- <img :src='item.icon'/>   -->
                    <p>{{ item.name }}</p>
                    </div>
                </li>
                <!-- <li data-id="szyy"><span>市政应用</span></li>
                <li data-id="srhw"><span>市容环卫</span></li>
                <li data-id="yllh"><span>园林绿化</span></li>
                <li data-id="csgl"><span>城市管理执法</span></li> -->
            </ul>
        </section>

        <section class="apps">
            <h2 class="title">{{ activeName }}</h2>
            <p class="subtitle">Industry application system</p>
            <ul class="list">
                <li v-for="(item,index) in childrenList" :key="'a' + index">
                        <div class="dataItem"  @click="toUrl(item)">
                        <img :src="item.icon" alt="">
                        <p>{{ item.name }}</p>
                        <i class="el-icon-arrow-right"></i>
                    </div>
                </li>
            </ul>
        </section>
    </div>
</template>

<script>
import { WelCome } from '@/api/index';
import { routerLink } from '@/mixins/routerLink'
export default {
    name: 'Apps',
    mixins: [routerLink],
    created() {
        this._siteMap = new Map([
            ['szyy', ''],
            ['srhw', ''],
            ['yllh', ''],
            ['csgl', ''],

            ['yqjk', 'http://59.49.99.44:89/#/login'],
            ['clxt', 'http://gps.fancysx.com/admin/public/login.shtml'],
            ['xcxt', 'https://zhgl.tyzhcs.cn/#/SystemSetting'],
            ['zfjl', ''],
            ['zbxt', 'https://class.fancysx.com/wap/map-xd.html'],
            ['mqsb', 'https://class.fancysx.com/wap/map-xd.html'],
            ['mtbs', 'https://class.fancysx.com/wap/map-xd.html'],
        ]);
    },
    data() {
        return {
            dataList:[],
            activeIndex:1,
            childrenList:[],
            activeName:'市政公用'
        };
    },

    methods:{
        getList(){
            const params = {
                menuId:'3',
                childId:'0'
            }
            WelCome.oaMenuChildgetByMenuId(params).then(res=>{
                this.dataList = res.data
            })
        },
        tabchange(item){
            this.activeName = item.name || '市政公用'
            this.activeIndex = item.id || item
            const params = {
                menuId:'3',
                childId: this.activeIndex || 1
            }
            WelCome.oaMenuChildgetByMenuId(params).then(res=>{
                this.childrenList = res.data
            })
        },
        toUrl(item){
            window.open(item.link)
        }
    },

    mounted(){
        this.getList()
        this.tabchange(1)
    },
}
</script>

<style lang="less" scoped>
.btn-back {
    width: 120px;
    height: 35px;
    border-radius: 18px;
    outline: none;
    color: #ffffff;
    border: 0;
    font-size: 18px;
    line-height: 36px;
    margin: 50px;
    text-indent: 20px;
    cursor: pointer;
    background: url(../../assets/images/welcome/icon-apps-arrow.png) no-repeat 30px 50% #38383c;
}

.apps {
    margin-left: 188px;

    &:first-child {
        padding-top: 170px;
    }
}

h2.title {
    font-size: 40px;
    font-family: 'JingDianYaHei';
    font-weight: 400;
    color: #FFFFFF;
}

p.subtitle {
    font-size: 18px;
    font-family: Arial;
    font-weight: 400;
    color: #E6E3E3;
    opacity: 0.6;
    margin-top: 10px;
}

.card {
    display: flex;
    margin-top: 70px;
    margin-bottom: 100px;
    .dataItem{
        display: flex;
        flex-direction: column;
        align-self: flex-start;
    }
    >li {
        div{
            width: 368px;
            height: 184px;
            margin-right: 23px;
            text-align: center;
            background-size: 100% 100% !important;

            p{
                font-size: 20px;
                font-family: Source Han Sans CN;
                font-weight: 500;
                color: #FFFFFF;
                margin-top: 125px;
            }
        }
       
        // background: url(../../assets/images/welcome/bg-apps-card.png) no-repeat 0 0;

        // &:nth-child(2) {
        //     background-position: -368px 0;
        // }

        // &:nth-child(3) {
        //     background-position: -736px 0;
        // }

        // &:last-child {
        //     background-position: -1104px 0;
        //     margin-right: 0;
        // }
        
    }

    span {
        font-size: 20px;
        font-family: "JingDianYaHei";
        color: #FFFFFF;
        margin-top: 120px;
        display: block;
    }
}

.list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 40px;
    .dataItem{
        width: 368px;
        height: 100px;
        background: linear-gradient(-45deg, #1D56E1, #072C3E);
        border-image: linear-gradient(-45deg, #14D6FF, #00AFD4) 2 2;
        opacity: 0.8;
        border-radius: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
        img{
            width: 72px;
            height: 72px;
        }
        p{
            font-size: 24px;
            font-family: 35--Regular;
            font-weight: 400;
            color: #FFFFFF;
            margin-right: 50px;
        }
        i{
            color: #fff;
            font-weight: 500;
        }
    }

    li {
        width: 368px;
        height: 100px;
        // background: url(../../assets/images/welcome/bg-apps-list.png) no-repeat 0 0;
        margin-bottom: 25px;
        margin-right: 24px;
        cursor: pointer;

        // &.list-yqjk {
        //     background-position: 0 0;
        // }

        // &.list-clxt {
        //     background-position: -392px 0;
        // }

        // &.list-xcxt {
        //     background-position: -784px 0;
        // }

        // &.list-zfjl {
        //     background-position: -1176px 0;
        // }

        // &.list-zbxt {
        //     background-position: 0 -126px;
        // }

        // &.list-mqsb {
        //     background-position: -392px -126px;
        // }

        // &.list-mtbs {
        //     background-position: -784px -126px;
        // }
    }
}
</style>